<script>
export default {
  name: "LemonAvatar",
  props: {
    src: String,
    icon: {
      type: String,
      default: "lemon-icon-people"
    },
    size: {
      type: Number,
      default: 32
    }
  },
  data() {
    return {
      imageFinishLoad: true
    };
  },
  render() {
    return (
      <span
        style={this.style}
        class="lemon-avatar"
        on-click={e => this.$emit("click", e)}
      >
        {this.imageFinishLoad && <i class={this.icon} />}
        <img src={this.src} onLoad={this._handleLoad} />
      </span>
    );
  },
  computed: {
    style() {
      const size = `${this.size}px`;
      return {
        width: size,
        height: size,
        lineHeight: size,
        fontSize: `${this.size / 2}px`
      };
    }
  },
  methods: {
    _handleLoad() {
      this.imageFinishLoad = false;
    }
  }
};
</script>
<style lang="scss">
</style>
